<template>
	<gracePage statusBarBG="#EB5D4B" :headerHeight="0">
		<view slot="gHeader" class="grace-border-b">
			<graceHeader background="#FFFFFF" style="height: 88rpx;">
				<view class="grace-header-body">
					<!-- 返回按钮 -->
					<view class="grace-header-icons grace-icons icon-arrow-left" @tap="goback"></view>
					<!-- 中间内容 -->
					<view class="grace-header-content-noflex" style="margin-right: 50rpx;text-align: center;color: #333333;font-size: 30rpx;">新增发票抬头</view>
				</view>
			</graceHeader>
		</view>
		<view slot="gBody" class="grace-body">
			<view class="form_div">
				<form @submit="loginNow" class="grace-form">
					<view class="grace-form-item">
						<text class="grace-form-label" style="color: #333333;">发票类型</text>
						<view class="grace-form-body"><input type="number" v-model="phoneno" class="grace-form-input" name="pn" placeholder="请输入发票类型" /></view>
						<text class="grace-icons icon-close grace-form-icon grace-text-center" v-if="phoneno != ''" @tap="clearInput('')"></text>
					</view>
					<view class="grace-form-item">
						<text class="grace-form-label" style="color: #333333;">抬头类型</text>
						<view class="grace-form-body">
							<radio-group name="danxuan">
								<label class="grace-check-item-v"><radio value="1" color="#EB5D4B" style="transform:scale(0.7)"></radio>个人或事业单位</label>
								<label class="grace-check-item-v"><radio value="2" color="#EB5D4B" style="transform:scale(0.7);margin-left: 10rpx;"></radio>企业</label>
							</radio-group>
						</view>
						<text class="grace-icons icon-close grace-form-icon grace-text-center" v-if="phoneno != ''" @tap="clearInput('')"></text>
					</view>
					<view class="grace-form-item">
						<text class="grace-form-label" style="color: #333333;">公司名称<text style="color: #EB5D4B;">*</text></text>
						<view class="grace-form-body"><input type="number" v-model="phoneno" class="grace-form-input" name="pn" placeholder="请输入公司名称" /></view>
						<text class="grace-icons icon-close grace-form-icon grace-text-center" v-if="phoneno != ''" @tap="clearInput('')"></text>
					</view>
					<view class="grace-form-item">
						<text class="grace-form-label" style="color: #333333;">公司税号<text style="color: #EB5D4B;">*</text></text>
						<view class="grace-form-body"><input type="number" v-model="phoneno" class="grace-form-input" name="pn" placeholder="请输入纳税人识别号" /></view>
						<text class="grace-icons icon-close grace-form-icon grace-text-center" v-if="phoneno != ''" @tap="clearInput('')"></text>
					</view>
					<view class="grace-form-item">
						<text class="grace-form-label" style="color: #333333;">注册地址</text>
						<view class="grace-form-body"><input type="number" v-model="phoneno" class="grace-form-input" name="pn" placeholder="请填写公司注册地址" /></view>
						<text class="grace-icons icon-close grace-form-icon grace-text-center" v-if="phoneno != ''" @tap="clearInput('')"></text>
					</view>
					<view class="grace-form-item">
						<text class="grace-form-label" style="color: #333333;">注册电话</text>
						<view class="grace-form-body"><input type="number" v-model="phoneno" class="grace-form-input" name="pn" placeholder="请输入公司注册电话" /></view>
						<text class="grace-icons icon-close grace-form-icon grace-text-center" v-if="phoneno != ''" @tap="clearInput('')"></text>
					</view>
					<view class="grace-form-item">
						<text class="grace-form-label" style="color: #333333;">开户银行</text>
						<view class="grace-form-body"><input type="number" v-model="phoneno" class="grace-form-input" name="pn" placeholder="请填写公司开户银行" /></view>
						<text class="grace-icons icon-close grace-form-icon grace-text-center" v-if="phoneno != ''" @tap="clearInput('')"></text>
					</view>
					<view class="grace-form-item">
						<text class="grace-form-label" style="color: #333333;">银行账号</text>
						<view class="grace-form-body"><input type="number" v-model="phoneno" class="grace-form-input" name="pn" placeholder="请填写银行账号" /></view>
						<text class="grace-icons icon-close grace-form-icon grace-text-center" v-if="phoneno != ''" @tap="clearInput('')"></text>
					</view>
					<view class="grace-form-item">
						<text class="grace-form-label" style="color: #333333;width: 200rpx;">设置为默认抬头</text>
						<view class="grace-form-body">
							<graceCheckBtn style="margin-left: 340rpx;" :checked="val" :size="32" color="#EE624E">
							</graceCheckBtn>
						</view>
					</view>
					
				</form>
			</view>
			<view class="out-btn">退出账户</view>
		</view>
	</gracePage>
</template>
<script>
import gracePage from '../../graceUI/components/gracePage.vue';
import graceHeader from '../../graceUI/components/graceHeader.vue';
import graceCheckBtn from '../../graceUI/components/graceCheckBtn.vue';
export default {
	data() {
		return {
			phoneno:"",
			val:false
		};
	},
	methods: {
		goback: function() {
			uni.navigateBack({});
		},
		clearInput: function() {
			this.phoneno = '';
		},
	},
	components: {
		gracePage,
		graceHeader,
		graceCheckBtn
	}
};
</script>
<style lang="scss" scoped>
page {
	background: #f4f4f4;
}
.grace-body {
	padding: 0 44rpx;
	margin-top: 120rpx;
}
.grace-form-input {
	text-align: left;
}
.form_div {
	width:600rpx;
	background:rgba(255,255,255,1);
	box-shadow:0rpx 2rpx 5rpx 0rpx rgba(204,204,204,0.3);
	border-radius:16rpx;
	padding: 44rpx 35rpx;
}

.out-btn {
	width:620rpx;
	height:94rpx;
	margin-top:100rpx ;
	background:#EB5D4B;
	border-radius:47rpx;
	text-align: center;
	line-height: 94rpx;
	color: #FFFFFF;
	font-size: 28rpx;
	margin-left: 20rpx;
	margin-bottom: 40rpx;
}
</style>
